<template>
    <div class="v-body">
        <div class="data_card" v-for="(item, index) in 20" :key="index">
            <van-image width="60" height="60" :src="arr[index % 2].url" :round="true"></van-image>
            <div class="data_card_r">
                <div>{{ arr[index % 2].name }} -- {{ index }}</div>
                <div>{{ arr[index % 2].job }}</div>
            </div>
        </div>
    </div>
</template>

<script></script>

<script>
module.exports = {
    data() {
        return {
            arr: [
                {
                    name: '陈平安',
                    url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=535152645,975550398&fm=26&gp=0.jpg',
                    job: '落魄山宗主'
                },
                {
                    name: '宁姚',
                    url: 'https://imgsa.baidu.com/forum/w%3D580/sign=4f30184ddb2a283443a636036bb4c92e/c31693cc7b899e5120da32444da7d933c9950d73.jpg',
                    job: '山主夫人'
                }
            ]
        };
    },
    computed: {}
};
</script>

<style>
.v-body {
    border: 2px solid red;
    /* padding-bottom: 50px; */
    box-sizing: border-box;
}
.data_card {
    /* border: 1px solid red; */
    display: flex;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.1);
}
.data_card_r {
    flex: 1;
    padding-left: 10px;
}
</style>
